// 引用 @import "library"; //library.less
// 引用 @import "index.css"

/* :root {
    --bg1: #aea0a0;
} */
@bg: #aea0a0;

* {
    margin: 0%;
    padding: 0%;
}

html,body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

// Mixin
.samllBox {
    padding: 10px;
    gap: 10px;
}

// 把@mian-body这个变量的值设置为main，相当于给main起了一个别名叫“main-body”
@main-body: main;
// 选择器插值 @{main-body} {内部样式...}
// 选择器使用时，直接引用和单独引用不用前置选择符，类引用需要加选择符"."
@{main-body} {
    // 混合（Mixin）：是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
    .samllBox();
    margin: 0% auto;
    width: 500px;
    height: 400px;
    display: flex;

    // 嵌套
    .bigBox {
        flex: 1;
        // background-color: var(--bg1);
        background-color: @bg;
    }

    // &代表父级元素
    &::before {
        content: '';
    }
}

// 属性变量
@borderstyle: border-style;
@styleline: solid;
@wrap: #wrap;
@{wrap} {
    width: 100px;
    height: 100px;
    // 变量名必须用大括号包含起来
    // 错误示例：@borderstyle： @styleline；
    @{borderstyle}: @styleline;
}

// URL变量

/* @images:'../img'
body {
    background: url("@{images}/cat.png");
} */

// 声明变量
@background: {background: red;} ;

// 变量运算
@ewidth1: 100px;
@column: #column;
@{column} {
    width: @ewidth1 - 10px;
}

// 变量的作用域（就近原则）
@a: 100%;
@var: @a;
#group {
    width: @var;
    @a: 9%;
}

// 用变量定义变量
@font1: @var1;
@var1: 'front';
#waps::after { 
    content: @var1;//将@var替换为其值content：@front；
}